<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
</head>

<body>
    <h1>Snapshots</h1>
    <ul id="imagegallery">
        <li>
            <a href="images/1.jpg" title="1">
                <img src="images/1.jpg" alt="1">
            </a>
        </li>
        <li>
            <a href="images/2.jpg" title="2">
                <img src="images/2.jpg" alt="2">
            </a>
        </li>
        <li>
            <a href="images/3.jpg" title="3">
                <img src="images/3.jpg" alt="3">
            </a>
        </li>
        <li>
            <a href="images/4.jpg" title="4">
                <img src="images/4.jpg" alt="4">
            </a>
        </li>
    </ul>
    <img id="placeholder" src="images/1.jpg" alt="my image gallery" />
    <p id="description">Choose an image.</p>
    <script type="text/javascript" src="js/showPic.js"></script>
</body>

</html>
